<template>
	<view class="tree-main">
		<u-popup v-model="$store.state.leftPoupShow" mode="left" class="popupBox" border-radius="14" :mask-custom-style="{background:'rgba(0,0,0,0.3)'}">
			<text class="title">机房</text>
			<view class="tree-contain">
				<scroll-view class="tree-box" scroll-y="true">
					<view class="">
						<modelTree @defaultCheckKey="defaultCheckKey" @checkObj="checkObj" :treeData="treeData"></modelTree>
					</view>
				</scroll-view>
				<view class="control">
					<view style="overflow: hidden;">
						<u-button @click='cancel' :ripple="true" :custom-style="cancelStyle">取消</u-button>
						<u-button @click="check" type="primary" :ripple="true" :custom-style="checkStyle">确定</u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import modelTree from './modelTree.vue'
	export default{
		components:{modelTree},
		props:{
			treeData:{
				type:Array,
				default:()=>[],
				required:true
			}
		},
		data(){
			return{
				navTree:[],
				defaultKeys:[],
				checkNode:{}
			}
		},
		// watch:{
		// 	"navTree":{
		// 		immadiate:true,
		// 		handler:(newVal)=>{
					
		// 		}
		// 	}
		// },
		computed:{
			cancelStyle(){
				return {
					"width":"150rpx",
					"height":"56rpx",
					"float":"left",
					"margin-right":"34rpx"
				}
			},
			checkStyle(){
				return {
					"width":"150rpx",
					"height":"56rpx",
					"float":"left",
					"margin-left":"34rpx"
				}
			}
		},
		methods:{
			cancel(){
				this.$store.commit('set_leftPoupShow',false)
			},
			defaultCheckKey(val){
				this.defaultKeys = val
			},
			check(){
				console.log("check id",this.checkNode.id);
				this.$store.commit('set_defaultNavKey',this.defaultKeys)
				// this.$store.commit('set_leftPoupShow',false)
				if(this.checkNode.id){
					uni.navigateTo({
						url:'/pages/computerRoomView/computerRoomView?roomId='+this.checkNode.id+'&roomName='+this.checkNode.roomName
					})
				}
			},
			checkObj(val){
				console.log(val);
				this.checkNode = val.node.data;
			}
		},
		mounted() {
			// this.navTree = this.treeData
			this.defaultKeys = this.$store.state.defaultNavKey;
		}
	}
</script>

<style lang="scss" scoped>
.tree-main{
	.title{
		font-size: 34rpx;
		color: $default-color;
		display: block;
		padding-top: 27rpx;
		margin-left: 32rpx;
		margin-bottom: 30rpx;
	}
	.tree-contain{
		width: 630rpx;
		height: calc( 100vh - 150rpx  - 260rpx);
		.tree-box{
			height: 100%;
		}
		.control{
			position: absolute;
			width: 100%;
			top: 90%;
			left: 0;
			display: flex;
			justify-content: center;
		}
	}
}
.popupBox{
	height: calc( 100vh - var(--status-bar-height) );
	left: 0;
	top: var(--status-bar-height);
}
</style>
